<script>
import { reactive } from "@vue/reactivity";


export default {
   props:["historylist"],
  emits:["listsearch"],
 
 
  setup(props,ctx) {
    let data = reactive({
      hotlist: ["羽绒服", "卫衣", "外套", "牛仔裤", "运动裤", "长袖"],
      historylist:props.historylist,
   
     
    });

    // console.log(props.historylist);
    let listsearch =(item)=>{
      ctx.emit('listsearch',item)



    }
  

   



    return {
      data,
      listsearch,

      
    };
  },
};
</script>

<template>
  <div class="hotHistory">
    <!-- 热门搜索 -->
    <div class="hot_search">
      <div class="title"><span></span>热门搜索</div>
      <ul class="hot_list">
        <li class="item" v-for="(item, index) in data.hotlist" :key="index" @click="listsearch(item)">
          <span>{{ index + 1 }}</span
          >{{ item }}
        </li>
        
      </ul>
    </div>
    <!-- 热门搜索 -->

    <!-- 历史搜索 -->
    <div class="history_search">
      <div class="title"><span></span>历史搜索</div>
      <ul class="history_list">
        <li v-for="(item ,index) in data.historylist" :key ="index" >{{item}}</li>
       
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hotHistory {
  .hot_search {
    .title {
      font-size: 18px;
      font-weight: 700;
      color: #231916;
      margin-left: 30px;
      padding-bottom: 13px;
    }
    .hot_list {
      padding: 0 18px;
      display: flex;
      width: 90%;
      flex-wrap: wrap;
      .item {
        line-height: 36px;
        width: 45%;
        font-size: 14px;
        color: #241b18;
        font-weight: 700;
        span {
          padding: 0 5px;
        }
        &:nth-child(1) {
          span {
            color: #b3131a;
          }
        }
        &:nth-child(2) {
          span {
            color: #e60013;
          }
        }
        &:nth-child(3) {
          span {
            color: #eb6242;
          }
        }
        &:nth-child(4) {
          span {
            color: #d4602a;
          }
        }
        &:nth-child(5) {
          span {
            color: #ec6200;
          }
        }
        &:nth-child(6) {
          span {
            color: #f18700;
          }
        }
      }
    }
  }
  .history_search {
    .title {
      font-size: 18px;
      font-weight: 700;
      color: #231916;
      margin-left: 30px;

      height: 64px;
      line-height: 64px;
    }
    .history_list {
      display: flex;
      margin-left: 30px;
      flex-wrap: wrap;
      li {
        color: #646363;
        background-color: #eeefef;
        height: 33px;
        line-height: 33px;
        padding: 0 10px;
        margin-right: 10px;
        border-radius: 5px;
        font-weight: 700;
        margin-bottom: 18px;
      }
    }
  }
}
</style>